<script type="text/javascript">
	validation_kontak = null;
	kontaklist_createimageWindows = null;
	$(document).ready(function () {
		/* DECLARATION VARIABLE */
		/* General Variable */
		var theme = 'fresh';
		var kontaklist_source;
		var kontaklist_dataAdapter;

		/* Area and Field Variable */
		var kontaklist_menu = $("#kontaklist_menu");
		var kontaklist_content = $("#kontaklist_content");
		var kontaklist_expander = $("#kontaklist_expander");
		var kontaklist_form = $("#kontaklist_form");
		var kontaklist_gridview = $("#kontaklist_gridview");
		var kontaklist_search_textfield = $("#kontaklist_search_textfield");
		var kontaklist_searchbutton = $("#kontaklist_searchbutton");
		var kontaklist_addbutton = $("#kontaklist_addbutton");
		var kontaklist_editbutton = $("#kontaklist_editbutton");
		var kontaklist_deletebutton = $("#kontaklist_deletebutton");
		var kontaklist_resetbutton = $("#kontaklist_resetbutton");

		/* END DECLARATION VARIABEL */

		/* SET TYPE AND THEME */
		$('.field_input').addClass('jqx-input');
		$('.field_input').addClass('field');
		$('.field_input').addClass('jqx-rc-all');

		kontaklist_menu.jqxMenu({ align: 'left', width: '789px', height: '35px', autoOpen: false, autoCloseOnMouseLeave: false, showTopLevelArrows: true, theme: theme });
		kontaklist_menu.css('visibility', 'visible');
		kontaklist_addbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		kontaklist_editbutton.jqxButton({ width : '70px' , height : '18px' ,theme : theme });
		kontaklist_deletebutton.jqxButton({ width : '70px' , height : '18px' ,theme : theme });
		kontaklist_searchbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		kontaklist_resetbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });

		var kontaklist_source = {
			id : 'id',
			datatype : "json",
			url : "<?php echo base_url(); ?>c_kontak/kontak_list",
			root : "results",
			datafields : [
				{ name : 'id' },
				{ name : 'nama' },
				{ name : 'email' },
				{ name : 'notelp' },
				{ name : 'judul' },
				{ name : 'pesan' },
				{ name : 'ipaddress' },
				{ name : 'tanggal' }
			],
			beforeprocessing : function(data){
				kontaklist_source.totalrecords = data[0].TotalRows;
			}
		}
		var kontaklist_dataAdapter = new $.jqx.dataAdapter(kontaklist_source);

		kontaklist_gridview.jqxGrid({
			source : kontaklist_dataAdapter,
			width : 789,
			theme : theme,
			pageable : true,
			autoheight : true,
			sortable : true,
			filterable : true,
			columnsresize : true,
			virtualmode : true,
			pagesize : 15,
			pagesizeoptions : [15],
			rendergridrows : function(){
				return kontaklist_dataAdapter.records;
			},
			columns : [
				{text : 'Nama', dataField : 'nama', width : 100},
				{text : 'Email', dataField : 'email', width: 100},
				{text : 'No. Telp', dataField : 'notelp', width: 100},
				{text : 'Judul', dataField : 'judul', width: 100},
				{text : 'Pesan', dataField : 'pesan', width: 400},
				{text : 'Tanggal', dataField : 'tanggal', width: 100}
			]
		});


		/* DECLARATION FUNCTION */
		function reset_form(){
		}
		function refresh_grid(){
			kontaklist_gridview.jqxGrid('updatebounddata');
		}

		kontaklist_addbutton.click(function(){
			$('#kontaklist_content').empty();
			$('<img src="./images/loader.gif" style="margin:50px auto auto 390px;">').appendTo('#contents');
			$('#kontaklist_content').load('index.php/c_kontak/kontak_addedit');
		});

		kontaklist_editbutton.click(function(){
			var kontak_id = '';
			var rowindex = kontaklist_gridview.jqxGrid('getselectedrowindex');
			var data_record = kontaklist_gridview.jqxGrid('getrowdata', rowindex);
			if(data_record !== null){
				kontak_id = data_record.id;
				$('#kontaklist_content').empty();
				$('<img src="./images/loader.gif" style="margin:50px auto auto 390px;">').appendTo('#contents');
				$('#kontaklist_content').load('index.php/c_kontak/kontak_addedit/'+kontak_id);
			}else{
				alert("Pilih salah satu field yang ingin diubah");
			}
		});

		kontaklist_searchbutton.click(function(){
			var search_text = kontaklist_search_textfield.val();
			kontaklist_source['url'] = "index.php/c_kontak/get_action&task=list&search_text=" + search_text;
			kontaklist_gridview.jqxGrid('gotopage',0);
			kontaklist_dataAdapter.dataBind();
		});
		kontaklist_resetbutton.click(function(){
			kontaklist_search_textfield.val("");
			kontaklist_source['url'] = "index.php/c_kontak/get_action&task=list&search_text=";
			kontaklist_gridview.jqxGrid('gotopage',0);
			kontaklist_dataAdapter.dataBind();
		});

		kontaklist_deletebutton.click(function(){

			var rowindex = kontaklist_gridview.jqxGrid('getselectedrowindex');
			var data_record = kontaklist_gridview.jqxGrid('getrowdata', rowindex);
			if(data_record !== null){
			var kontak_id=data_record.id;

			if(window.confirm("Apakah anda yakin menghapus data ini ? ")){
				$(document).ready(function () {
					$.ajax({
						url : 'index.php/c_kontak/kontak_delete',
						type : 'POST',
						data : {
							id : kontak_id
						}, success : function(msg){
							var result = eval(msg);
							if(result == 1){
								$("#kontaklist_gridview").jqxGrid('updatebounddata');
								alert("Data sukses dihapus");
							}else{
								alert("Data gagal dihapus");
							}
						}
					});

				});
			}
		}

		});

		function kontaklist_view(event, type ,file){
			kontaklist_createimageWindows(type ,file);
		}

		function kontaklist_edit(event, id) {
			self.location='index.php/c_kontak/get_action&task=update/' + id;
		}

		function kontaklist_validasi(event, row) {
			validation_permohonan(row);
		}

});
</script>
<style type="text/css">
	.field{
		height : 22px;
	}
</style>
	<!-- Begin one column window -->
<br class="clear"/>
<div class="header">
	<span><h1>KONTAK</h1></span>
</div>
<div id="kontaklist_content">
	<div id="kontaklist_menu">
		<table align="left">
			<tr>
				<td colspan=5>

				</td>
			</tr>
			<tr align="left">
			<!-- 	<td align="left" valign="middle">
					<div id='kontaklist_addbutton'>
						<img style='float: left; margin: 0px;' src='./images/icons/add.png' />
						<div style='float: left; margin-left: 4px;'>Baru</div>
					</div>
				</td>
				<td align="left" valign="middle">
					<div id='kontaklist_editbutton'>
						<img style='float: left; margin: 0px;' src='./images/icons/page_edit.png' />
						<div style='float: left; margin-left: 4px;'>Ubah</div>
					</div>
				</td>
				<td align="left" valign="middle">
					<div id='kontaklist_deletebutton'>
						<img style='float: left; margin: 0px;' src='./images/icons/delete.png' />
						<div style='float: left; margin-left: 4px;'>Hapus</div>
					</div>
				</td>
				<!--
				<td align="left" valign="middle"><div>
					<input type="text" id="kontaklist_search_textfield" class="field_input" style="height: 22px; width : 200px; background-color : #FFFFFF;">
				</div>
				</td>
				<td align="left" valign="middle">
					<div id='kontaklist_searchbutton'>
						<img style='float: left; margin: 0px;' src='./images/icons/search.gif' />
						<div style='float: left; margin-left: 4px;'>Cari</div>
					</div>
				</td>
				<td align="left" valign="middle">
					<div id='kontaklist_resetbutton'>
						<img style='float: left; margin: 0px;' src='./images/icons/table_refresh.png' />
						<div style='float: left; margin-left: 4px;'>Reset</div>
					</div>
				</td>
				-->
			</tr>
		</table>
	</div>

	<div id="kontaklist_gridview"></div>

</div>



	<!-- End one column window -->
